<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>消息滚动</title>
	<style>
		body {
		 font-size: 12px;
		 line-height: 24px;
		}
		* {
		 margin: 0px;
		 padding: 0px;   /* 去掉所有标签的marign和padding的值 */
		}
		ul {
		 list-style: none;   /* 去掉ul标签默认的点样式 */
		}
		a img {
		 border: none;  /* 超链接下，图片的边框 */
		}
		a {
		 color: #333;
		 text-decoration: none;  /* 超链接样式 */
		}
		a:hover {
		 color: #ff0000;
		}
		li{
			height:24px;
		}
		.box{
			width:335px;
			height:120px;
			overflow:hidden;
			margin:0 auto;
			border: 3px solid #ababab;
 			border-radius: 5px;
 			box-shadow: 2px 2px 10px #ababab;
 			padding-left:20px;
		}
		.title{
			display:block;
			font-size:20px;
			width:335px;
			margin:50px auto 20px;
			border:1px solid green;
		}
	</style>
</head>
<body>
	<marquee behavior="alternate" direction="right" class="title">间歇滚动</marquee>
	<div class="box" id="box1">
		 <ul id="ul1">
		  <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
		  <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
		  <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
		  <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
		  <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
		  <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
		  <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
		  <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
		  <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
		 </ul>
		 <ul id="ul2"></ul>
	</div>
	<marquee behavior="alternate" direction="left" class="title">无缝滚动</marquee>
	<div class="box" id="box2">
		 <ul id="ul3">
		  <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
		  <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
		  <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
		  <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
		  <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
		  <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
		  <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
		  <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
		  <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
		 </ul>
		 <ul id="ul4"></ul>
	</div>
	<script>
		!function(){
			var box = document.getElementById('box1');
			var ul1 = document.getElementById('ul1');
			var ul2 = document.getElementById('ul2');
			var timer;
			var delay_timer;
			var delay = 1000;
			var speed = 20;
			var liHeight = 24;
			ul2.innerHTML = ul1.innerHTML;

			function startScroll(){
				timer = setInterval(scrollUp,speed);
				box.scrollTop++;
			}

			function scrollUp(){
				if(box.scrollTop % liHeight === 0){
					clearInterval(timer);
					delay_timer = setTimeout(startScroll,delay);
				} else {
					box.scrollTop++;
					if(box.scrollTop >= box.scrollHeight/2){
						box.scrollTop = 0
					}
				}
			}
			// 执行
			setTimeout(startScroll,delay);

			box.onmouseover = function(){
				clearInterval(timer);
				clearTimeout(delay_timer);
				box.style.border = "1px solid red";
			}
			
			box.onmouseout = function(){
				timer = setInterval(scrollUp,speed);
				box.style.border =  '3px solid #ababab';
			}
		}()
	</script>
	<script>
		!function(){
			var box = document.getElementById('box2');
			var ul3 = document.getElementById('ul3');
			var ul4 = document.getElementById('ul4');
			var timer;
			var delay = 1000;
			var speed = 20;
			var liHeight = 24;
			ul4.innerHTML = ul3.innerHTML;

			function startScroll(){
				timer = setInterval(scrollUp,speed);
				box.scrollTop++;
			}

			function scrollUp(){
				if(box.scrollTop >= box.scrollHeight/2){
					box.scrollTop = 0;
				}
				box.scrollTop++;
			}
			// 执行
			setTimeout(startScroll,delay);

			box.onmouseover = function(){
				clearInterval(timer);
				box.style.border = "1px solid red";
			}
			
			box.onmouseout = function(){
				timer = setInterval(scrollUp,speed);
				box.style.border =  '3px solid #ababab';
			}
		}()
	</script>
</body>
</html>